<template>
  <div class="mask" v-show="props.show">
    <div class="click" @click="emit('close')"></div>
     <div class="contianer">
        <div class="sex">
            <div class="flex-column a_item" @click="handleSelect('男')">
                <image src="/static/user/male.png" class="male"/>
                <span :class="[ sex === '男' ? 'active' : '']">男</span>
            </div>
            <div class="flex-column a_item" @click="handleSelect('女')">
                <image src="/static/user/female.png" class="female" />
                <span :class="[ sex === '女' ? 'active' : '']">女</span>
            </div>
        </div>
        <div class="footer" @click="handleConfirm">
            确定
        </div>
     </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
const emit = defineEmits(['close', 'select']);
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    sex: {
        type: String,
        default: '男'
    }
})
const sex = ref(props.sex);
const handleSelect = (type) => {
   sex.value = type;
}
const handleConfirm = () => {
    console.log('===>', sex.value);
    emit('select', sex.value);
    emit('close');
}
</script>

<style lang="scss">
    .click{
        width: 100%;
        height: calc(100vh - 500rpx);
    }
    .contianer{
        width: calc(100% - 64rpx);
        height: 500rpx;
        background-color: #fff;
		position: fixed;
		bottom: 0;
		border-radius: 40rpx;
        padding: 0 32rpx;
        z-index: 999;
        .sex{
            display: flex;
            justify-content: space-between;
            margin-top: 40rpx;
            padding: 0 64rpx;
            .male , .female{
                width: 128rpx;
                height: 128rpx;
            }
            .active{
                color: #51B7FF;
            }
        }
        .footer{
            position: fixed;
            width: calc(100% - 64rpx);
            border-radius: 40rpx;
            bottom: 88rpx;
            padding: 20rpx 0;
            background: linear-gradient( 315deg, #68edc5 0%, #51b7ff 100%);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>